﻿@{
    ViewBag.title = "index";
    Layout = "/Views/Shared/_Layout_iframe.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>OutProduct</title>
    <style>
        .error-message {
            color: red;
            font-size: 12px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>商品出库页面</legend>
    </fieldset>
    <form class="layui-form" >
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-table" id="outProducts">
                        <colgroup>
                            <col style="width: 30%;">
                            <col style="width: 30%;">
                            <col style="width: 40%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>商品名称</th>
                                <th>当前库存</th>
                                <th>出库数量</th>
                            </tr>
                        </thead>
                        <tbody id="outProducts">
                            @foreach (var product in Model)
                            {
                                <tr>
                                    <td>@product.ProductName</td>
                                    <td>@product.Number</td>
                                    <td>
                                        <input type="number" class="layui-input out-quantity"
                                               data-id="@product.Id"
                                               min="1"
                                               max="@product.Threshold"
                                               value="1">
                                        <span class="error-message" style="display: none;">超出阈值</span>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                    <div class="layui-form-item">
                        <label class="layui-form-label">员工姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="Name" id="searchName" class="layui-input" lay-verify="required" placeholder="请输入员工姓名" style="width:400px;" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1" style="margin-left:40px;">确认出库</button>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <script>

            //判断出库数量是否合规
            $(document).ready(function () {
                // 为输入框绑定 change 事件
                $('.out-quantity').on('change', function () {
                    var inputValue = parseInt($(this).val());
                    var threshold = parseInt($(this).closest('tr').find('td:nth-child(2)').text());
                    var errorMessage = $(this).next('.error-message');
                    if (inputValue > threshold) {
                        errorMessage.text('超出库存').show();
                        // 可以选择将输入框的值重置为阈值
                        $(this).val(threshold);
                    } else {
                        errorMessage.text('超出库存').hide();
                    }
                });
            });
        </script>
        <script>
            var productData = [];
        //员工自动填充
        var staffId;
        layui.use(['form', 'util', 'laydate', 'autocomplete'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;
            var autocomplete = layui.autocomplete;

            autocomplete.render({
                elem: $('#searchName'),
                cache: false,
                url: '/Product/SearchStaffName?name=' + $("#searchName").val(),
                template_val: '{{d.Id}}',       // 直接访问数组元素属性
                template_txt: '{{d.Name}}',
                done: function (res) {
                    console.log("数据加载成功：", res.data);
                },
                onselect: function (res) {
                    console.log("选中：", res);
                    $("#searchName").val(res.Name);
                   
                    staffId = res.Id;
                    console.log(staffId);
                    setTimeout(function () {
                        $('.layui-form-autocomplete').hide();
                    }, 100);
                }
            });
            // 为确认出库按钮绑定点击事件
           
           
            //提交事件
            form.on('submit(demo1)', function (data) {
                 productData = [];
                $('.out-quantity').each(function () {
                    var productId = parseInt($(this).data('id'));
                    var quantity = parseInt($(this).val());
                    productData.push({
                        InboundId: staffId,
                        ProductId: productId,
                        Number: quantity
                    });
                });
                $.post("/product/OutboundInsert", { productData: encodeURIComponent(JSON.stringify(productData)) }, function (resp) {
                        if (resp.code == 0) {
                            layer.msg('出库成功', { time: 1000 }, function () {
                                // 父页面的table重载
                                parent.layui.table.reload('testProduct');
                                // 关闭弹出层
                                var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
                                parent.layer.close(index);
                            });
                        }
                    });
                return false;
            });
        });
        </script>
</body>
</html >
